<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i> 推广列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <!-- <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
                <el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
                    <el-option key="1" label="广东省" value="广东省"></el-option>
                    <el-option key="2" label="湖南省" value="湖南省"></el-option>
                </el-select>
                <el-input v-model="roleDesc1" placeholder="用户角色" class="handle-input mr10"></el-input>
                <el-input v-model="phone" placeholder="用户手机号" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button> -->
                <el-button type="primary" icon="el-icon-circle-plus-outline" class="add-user" @click="addExtensionClick">添加推广</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
                <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                <el-table-column prop="id" label="推广编号" sortable width="150" align="center">
                </el-table-column>
                <el-table-column prop="position" label="推广位置" width="120" align="center" :formatter="position">
                </el-table-column>
                <el-table-column prop="url" label="推广路径" align="center">
                </el-table-column>
                <el-table-column prop="sort" label="排序(值越小越往前)" align="center">
                </el-table-column>
                <el-table-column prop="status" label="状态" width="120" align="center" :formatter="status">
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" 
                    layout="total, sizes, prev, pager, next, jumper" 
                    :current-page="currentPage"
                    :page-sizes="[10,15,20]"
                    :page-size=pageSize
                    :total=total>
                </el-pagination>
            </div>
        </div>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 添加推广 -->
        <el-dialog title="添加推广" :visible.sync="addExtensionVisible" width="50%" center>
            <el-form :model="extensionForm"  status-icon :rules="extensionRules"  ref="extensionForm" label-width="200px" class="demo-ruleForm">
                <el-form-item label="选择推广位置"  prop="position">
                    <el-select  placeholder="请选择推广位置"  v-model="extensionForm.position">
                    <el-option label="首页" value="1"></el-option>
                    <el-option label="活动页" value="2"></el-option>

                    </el-select>
                </el-form-item>
               <el-form-item label="推广图片" prop="imgUrl">
                    <el-upload
                        action="https://lottery.yhhvip.shop/yhh-lottery/home/upload/img"
                        list-type="picture-card"
                        name="file"
                        :show-file-list="true"
                        :limit=limit
                        :on-success="uploadSuccess"
                        :on-exceed="uploadExceed">
                    <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="推广路径链接" prop="url">
                    <el-input type="text"  v-model="extensionForm.url" class="handle-input mr10" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input type="text"  v-model="extensionForm.sort" class="handle-input mr10" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="extensionForm.status">
                    <el-radio :label="1" value="1">上架</el-radio>
                    <el-radio :label="0" value="0">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addSubmitForm('extensionForm')">提交</el-button>
                    <el-button @click="addResetForm('extensionForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 添加推广end -->


        <!-- 编辑推广 -->
        <el-dialog title="编辑推广" :visible.sync="editVisible" width="50%" center>
            <el-form :model="editExtensionForm"  status-icon :rules="editExtensionRules"  ref="editExtensionForm" label-width="200px" class="demo-ruleForm">
                <el-form-item label="选择推广位置"  prop="position">
                    <el-select  placeholder="请选择推广位置"  v-model="editExtensionForm.position">
                    <el-option label="首页" :value="1"></el-option>
                    <el-option label="活动页" :value="2"></el-option>

                    </el-select>
                </el-form-item>
               <el-form-item label="推广图片" prop="imgUrl">
                    <el-upload
                        action="https://lottery.yhhvip.shop/yhh-lottery/home/upload/img"
                        list-type="picture-card"
                        name="file"
                        :show-file-list="true"
                        :limit=limit
                        :on-success="editUploadSuccess"
                        :on-exceed="editUploadExceed"
                        :file-list="editExtensionForm.imgUrl"
                        :on-remove="editExtensionRemove"
                        >
                    <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="推广路径链接" prop="url">
                    <el-input type="text"  v-model="editExtensionForm.url" class="handle-input mr10" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input type="text"  v-model="editExtensionForm.sort" class="handle-input mr10" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="editExtensionForm.status">
                    <el-radio :label="1" value="1">上架</el-radio>
                    <el-radio :label="0" value="0">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editSubmitForm('editExtensionForm')">提交</el-button>
                    <el-button @click="editResetForm('editExtensionForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 编辑推广end -->
    </div>
</template>

<script>
    import { Message } from 'element-ui';
    import { getExtension,addExtension,delExtension,getExidExtension,exidExtension } from '../../components/api/Extension.js';
    export default {
        name: 'extension',
        data() {
            return {
                tableData: [],
                multipleSelection: [],


                roleDesc1: '',
                phone:'',
                total:0,
                pageSize:10,
                currentPage:1,
                limit:1,

                del_list: [],
                is_search: false,
                editVisible: false,
                delVisible: false,
                addExtensionVisible:false,
                extensionForm:{
                    position:'',
                    url:'',
                    sort:'',
                    status:1,
                    imgUrl:''
                },
                 extensionRules:{
                    position: [
                        { required:true, message:'请选择推广位置', trigger: 'change' }
                    ],
                    // imgUrl: [
                    //     { required:true, message:'请上传推广图片', trigger: 'blur' }
                    // ],
                    url: [
                        { required:true, message:'请填写推广路径' , trigger: 'blur' }
                    ],
                    sort: [
                        { required:true, message:'请填写推广排序' , trigger: 'blur' }
                    ],
                    status:[
                        { required:true, message:'请填写推广状态', trigger:'blur'}
                    ]
                },

                 editExtensionForm:{
                    position:'',
                    url:'',
                    sort:'',
                    status:1,
                    imgUrl:[]
                },
                editExtensionRules:{
                    position: [
                        { required:true, message:'请选择推广位置', trigger: 'change' }
                    ],
                    // imgUrl: [
                    //     { required:true, message:'请上传推广图片', trigger: 'blur' }
                    // ],
                    url: [
                        { required:true, message:'请填写推广路径' , trigger: 'blur' }
                    ],
                    sort: [
                        { required:true, message:'请填写推广排序' , trigger: 'blur' }
                    ],
                    status:[
                        { required:true, message:'请填写推广状态', trigger:'blur'}
                    ]
                },
                idx: -1
            }
        },
        created() {
            this.getData();
        },
        computed: {

        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getData();
            },

            handleSizeChange(val){
                this.pageSize = val;
                this.getData();
            },
            //获取系统用户列表
            getData() {
                let router = this.$router;
                let params = {
                    position:1,
                    pageNum:this.currentPage,
                    pageSize:this.pageSize
                }
                getExtension(params).then((res)=>{
                    let data = res.data;
                    console.log(data);
                    if(res.status == 200){
                        this.tableData = data.list;
                        this.total = data.total;
                    }else{
                        //  Message({
                        //     message:res.data.msg,
                        //     type:'warning',
                        //     duration:2000,
                        //     onClose:function(){
                        //         router.push('/login');
                        //     }
                        // });
                    }
                    
                }).catch((err)=>{
                    console.log(err);
                    Message.error(err.msg);
                });
            },

            //搜索
            search() {
                this.getData();
            },
        
            position(row){
                if(row.position == 1){
                    return '首页'
                }else{
                    return '活动页'
                }
            },
            status(row,column){
                if(row.status == 1){
                    return '上架'
                }else{
                    return '下架'
                }
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleEdit(index, row) {
                this.editVisible = true;
                let parmas = {
                    id:row.id
                }
                this.editId = row.id;
                let that = this;
                getExidExtension(parmas).then((res)=>{
                    console.log(res);
                    if(res.status == 200){
                        let data = res.data;
                        data.imgUrl = [{url:data.imgUrl}];
                        let editData = {
                            position:data.position,
                            url:data.url,
                            sort:data.sort,
                            status:data.status,
                            imgUrl:data.imgUrl
                        };
                        console.log(data);
                        that.editExtensionForm = editData
                    }
                }).catch((err)=>{
                    console.log(err);
                });
                console.log(row.id);
            },

            //获取要删除系统用户的信息
            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
                console.log(row.id);
                this.delId = row.id;
            },
            delAll() {
                const length = this.multipleSelection.length;
                let str = '';
                this.del_list = this.del_list.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + ' ';
                }
                this.$message.error('删除了' + str);
                this.multipleSelection = [];
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 保存编辑
            saveEdit() {
                this.$set(this.tableData, this.idx, this.form);
                this.editVisible = false;
                this.$message.success(`修改第 ${this.idx+1} 行成功`);
            },
            // 确定删除
            deleteRow(){
                let params = {
                    id:this.delId
                };
                let that = this;
                delExtension(params).then((res)=>{

                    if(res.status == 200 ){
                        
                        that.delVisible = false;
                         that.tableData.splice(that.idx, 1);
                        Message({
                            message:'删除成功',
                            type:'success',
                            duration:2000
                        });
                    }
                    console.log(res);
                }).catch((err)=>{
                    console.log(err);
                });
                
            },

             //添加推广
            addExtensionClick(){
                this.addExtensionVisible = true;
            },

            //添加推广数据
            addSubmitForm(formName){
                this.$refs[formName].validate((valid) => {
                    console.log(valid);
                    if (valid) {
                        
                        let params = {
                            imgUrl:this.extensionForm.imgUrl,
                            position:this.extensionForm.position,
                            sort:this.extensionForm.sort,
                            status:this.extensionForm.status,
                            url:this.extensionForm.url
                        }
                        console.log(params);
                        let that = this;
                        addExtension(params).then((res)=>{
                            if(res.status == 200){
                                 Message({
                                    message:'添加成功',
                                    type:'success',
                                    duration:2000,
                                    onClose:function(){
                                        that.addExtensionVisible = false;
                                    }
                                });
                            }
                        }).catch((err)=>{
                            console.log(err);
                            Message.error(err.msg);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            //编辑推广数据
            editSubmitForm(formName){
                this.$refs[formName].validate((valid) => {
                    console.log(valid);
                    if (valid) {
                        
                        let params = {
                            id:this.editId,
                            imgUrl:this.editExtensionForm.imgUrl[0].url,
                            position:this.editExtensionForm.position,
                            sort:this.editExtensionForm.sort,
                            status:this.editExtensionForm.status,
                            url:this.editExtensionForm.url
                        }
                        console.log(params);
                        let that = this;
                        exidExtension(params).then((res)=>{
                            if(res.status == 200){
                                 Message({
                                    message:'编辑成功',
                                    type:'success',
                                    duration:2000,
                                    onClose:function(){
                                        that.editVisible = false;
                                    }
                                });
                            }
                        }).catch((err)=>{
                            console.log(err);
                            Message.error(err.msg);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            //添加重置表单
            addResetForm(formName){
                this.$refs[formName].resetFields();
            },
            //重置表单
            editResetForm(formName){
                this.$refs[formName].resetFields();
            },

            //添加上传图片
            uploadSuccess(file){
                 if(file.status == 200){
                     
                    this.extensionForm.imgUrl = file.data.domain+file.data.url;
                    Message({
                        message:'上传成功',
                        type:'success'
                    });

                }
            },

             //添加上传图片的限制
            uploadExceed(file){
                if(file){
                    Message({
                        message:'只能上传1张图片',
                        type:'warning'
                    });
                }
            },

            //编辑上传图片
            editUploadSuccess(file){
                 if(file.status == 200){
                    this.editExtensionForm.imgUrl.push({url:file.data.domain+file.data.url})
                    this.editExtensionForm.imgUrl = this.editExtensionForm.imgUrl;
                    Message({
                        message:'上传成功',
                        type:'success'
                    });

                }
            },

             //编辑上传图片的限制
            editUploadExceed(file){
                if(file){
                    Message({
                        message:'只能上传1张图片',
                        type:'warning'
                    });
                }
            },

            //编辑图片删除
            editExtensionRemove(file,fileList){
                console.log(file.url);
                console.log(fileList);
                let imgArr = this.editExtensionForm.imgUrl;
                for(let i=0,len = imgArr.length;i<len;i++){
                    if(imgArr[i].url == file.url){
                        imgArr.splice(i,1);
                    }
                }
                console.log(this.editExtensionForm.imgUrl);
            }
        }
    }

</script>

<style scoped>
    .add-user{
        float:right;
    }
    .handle-box {
        margin-bottom: 20px;
        height:30px;
    }

    .handle-select {
        width: 190px;
    }

    .handle-input {
        width: 190px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }


    
</style>
